<template>
  <div class="main">
    <div class="tablebox">
      <div class="table">
        <el-table
          height="72vh"
          :data="tableData"
          style="width: 100%; color: #999999"
          :header-cell-style="{ background: '#EBEFF5', color: '#000000' }"
        >
          <el-table-column
            width="200"
            prop="adPositionText"
            label="广告名称"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="广告说明"
            width="500"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column prop="type" label="广告开始时间">
            <template slot-scope="scope">
              {{ scope.row.adCreateTime }} - {{ scope.row.adEndTime }}
            </template>
          </el-table-column>

          <el-table-column prop="date" label="操作" width="100">
            <template slot-scope="scope">
              <span
                v-if="scope.row.adPosition !== 'index_store_ranking_list'"
                style="color: #399ef1; cursor: pointer"
                @click="
                  $router.push({
                    path: '/adDetails',
                    query: {
                      id: scope.row.id,
                      adFlag: scope.row.adFlag,
                    },
                  })
                "
                >详情</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          background
          style="font-size: 0.13rem"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { showMyAdvertisement } from "@/api/seller/adentry.js";
export default {
  created() {},
  data() {
    return {
      tableData: [],
      currentPage: 1,
      form: {
        pageNumber: 1,
        pageSize: 10,
      },
      total: null,
    };
  },
  created() {
    this.showMyAdvertisement();
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.form.pageNumber = val;
      this.showMyAdvertisement();
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.showMyAdvertisement();
    },
    //获取我的广告
    showMyAdvertisement() {
      showMyAdvertisement(this.form).then((data) => {
        this.tableData = data.data.records;
        this.total = data.data.total;
      });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.main {
  width: calc(100%);
  min-height: 100%;
  background: #ffffff;
  .tabbox {
    padding: 0 0.2rem;
    width: calc(100% - 0.4rem);
    height: 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tab:first-child {
      margin-left: 0rem;
    }
    .tab {
      width: 1.64rem;
      height: 0.4rem;
      border-radius: 0.4rem;
      background: #f5f7f9;
      line-height: 0.4rem;
      text-align: center;
      font-size: 0.2rem;
      color: #666666;
      margin-left: 0.2rem;
      cursor: pointer;
    }
    .activetab {
      color: #e22a1f;
    }
  }

  .tablebox {
    margin: 0 auto 0 0.2rem;
    padding: 0.15rem 0.2rem;
    min-height: 4.62rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-top: none;
    .table {
      width: 100%;
      height: auto;
    }
    .pagination {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #e22a1f !important;
      }
      ::v-deep .el-pager li {
        width: 0.4rem !important;
        height: 0.4rem !important;
        line-height: 0.4rem !important;
        border-radius: 0.04rem !important;
      }

      ::v-deep .el-pagination span {
        height: 0.4rem !important;
        line-height: 0.4rem !important;
      }
      ::v-deep .el-pagination button {
        width: 0.4rem !important;
        height: 0.4rem !important;
        line-height: 0.4rem !important;
        border-radius: 0.04rem !important;
      }
    }
  }
}
</style>
  